<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/my.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no">
  <style>
    input::-webkit-input-placeholder{font-size:0.2rem;color:#666666;}
  </style>
</head>
<body>
<div class="header-box">
  <p id="baby_details">编辑早教信息</p>
</div>
<div class="newedu">
  <div class="newedu_box">
    <div class="newedu_box_title">
      <span>机构名称</span><input type="text">
    </div>
    <div class="newedu_time">
      <p class="newedu_time_title">上课时间</p>
      <div class="chose_ym">
        <b id="prev_date"><</b>
        <span id="yea_mon">2018年4月</span>
        <b id="next_data">></b>
      </div>
      <div class="nums" id="nums">

      </div>
    </div>
    <p class="p_item1">
      <span>重复</span><span id="repeat">未设置 ></span>
    </p>
    <p class="p_item2">
      <span>时间</span>
      <input id="time1"  type="text" placeholder="设置时间">
      <i> -- </i>
      <input id="time2" type="text" placeholder="设置时间">
    </p>
  </div>
</div>
<div class="footer_kb"></div>
<div class="footer_kb1"></div>
<div id="repeat_show">
  <div id="zhezhao"></div>
  <div id="fixed_repeat">
    <ul id="repeat_list">
      <li>
        <p>每天</p>
      </li>
      <li>
        <p>每周</p>
      </li>
      <li>
        <p>每月</p>
      </li>
    </ul>
  </div>
</div>
</body>
<script src="js/jquery.js"></script><script src="js/jquery.cookie.js"></script>
<script src="js/base.js?v=base.js?v=20180102"></script>
<script src="js/datePicker.js"></script>
<script>

  var calendar = new datePicker();
  calendar.init({
    'trigger': '#time1', /*按钮选择器，用于触发弹出插件*/
    'type': 'time',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
    'minDate':'1900-1-1',/*最小日期*/
    'maxDate':'2100-12-31',/*最大日期*/
    'onSubmit':function(){/*确认时触发事件*/
      var theSelectData=calendar.value;
    },
    'onClose':function(){/*取消时触发事件*/
    }
  });
  calendar.init({
    'trigger': '#time2', /*按钮选择器，用于触发弹出插件*/
    'type': 'time',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
    'minDate':'1900-1-1',/*最小日期*/
    'maxDate':'2100-12-31',/*最大日期*/
    'onSubmit':function(){/*确认时触发事件*/
      var theSelectData=calendar.value;  /*theSelectData为选中的时间*/
    },
    'onClose':function(){/*取消时触发事件*/
    }
  });
  $('#repeat').click(function () {
     $('#fixed_repeat').css('bottom','0');
     $('#zhezhao').show();
  });
  $('#repeat_list li').click(function () {
     $('#repeat').html($(this).children('p').html()+' >');
     $('#fixed_repeat').css('bottom','-5rem');
    $('#zhezhao').hide();
  });
  $('#zhezhao').click(function () {
    $('#zhezhao').hide();
    $('#fixed_repeat').css('bottom','-5rem');
  });
  //var isShowDaka=1;
  //$("#daka").click(function () {
  //  isShowDaka=2;
  //  $(this).css("display","none").attr("class","");
  //  drawCal((new Date).getFullYear(),(new Date).getMonth() + 1,(new Date).getFullYear()+"年"+((new Date).getMonth() + 1)+"月");
  //});

  getDaysInmonth = function(iMonth, iYear){
    var dPrevDate = new Date(iYear, iMonth, 0);
    return dPrevDate.getDate();
  };
  var dCalDate = new Date((new Date).getFullYear(), (new Date).getMonth(), 1);
  bulidCal = function(iYear, iMonth) {
    var aMonth = new Array();
    aMonth[0] = new Array(7);
    aMonth[1] = new Array(7);
    aMonth[2] = new Array(7);
    aMonth[3] = new Array(7);
    aMonth[4] = new Array(7);
    aMonth[5] = new Array(7);
    aMonth[6] = new Array(7);

    var iDayOfFirst = dCalDate.getDay();
    var iDaysInMonth = getDaysInmonth(iMonth, iYear);
    var iVarDate = 1;
    var d, w;
    aMonth[0][0] = "日";
    aMonth[0][1] = "一";
    aMonth[0][2] = "二";
    aMonth[0][3] = "三";
    aMonth[0][4] = "四";
    aMonth[0][5] = "五";
    aMonth[0][6] = "六";
    for (d = iDayOfFirst; d < 7; d++) {
      aMonth[1][d] = iVarDate;
      iVarDate++;
    }
    for (w = 2; w < 7; w++) {
      for (d = 0; d < 7; d++) {
        if (iVarDate <= iDaysInMonth) {
          aMonth[w][d] = iVarDate;
          iVarDate++;
        }
      }
    }
    return aMonth;
  };
  ifHasSigned = function(signList,day){
    var signed = 1;
    var gg=new Date().getDate();
    // if (isShowDaka==true && gg == day) {
    //   signed = 3;
    //   return signed ;
    // }
    $.each(signList,function(index,item){
      var date = new Date(item.signDate);
      if(date.getDate() == day) {
        signed = 2;
        return false;
      }
    });
    return signed ;
  };
  var signList
  drawCal = function(iYear,iMonth,currentYearMonth) {
    $("#yea_mon").html(currentYearMonth);
    var ss=new Date().getTime();
    // if (isShowDaka==1){                            //今日未打卡前，
    //   var signList=[                            //模拟后台返回的用户已打卡的时间戳
    //     {signDate:1527850549123},               //2018-06-1 18:55:49:123
    //     {signDate:1527936949123},               //2018-06-2 18:55:49:123
    //     {signDate:1528109749123}                //2018-06-4 18:55:49:123
    //   ];
    // }else if(isShowDaka==2) {                                      //今日打卡后
    //   var signList=[                            //模拟后台返回的用户已打卡的时间戳
    //     {signDate:1527850549123},               //2018-06-1 18:55:49:123
    //     {signDate:1527936949123},               //2018-06-2 18:55:49:123
    //     {signDate:1528109749123},               //2018-06-4 18:55:49:123
    //     {signDate:ss},                          //当前时间的时间戳
    //   ];
    // }else if(isShowDaka==3) {
    //   var signList=[];
    // }
     signList=[];    //模拟后台返回的用户已选的时间戳
    var myMonth = bulidCal(iYear, iMonth);
    var htmls = "";
    htmls+=`<div class='sign' id='sign_cal'>`;
    htmls+=`<table class='table'>`;
    htmls+=`<tr>`;
    htmls+=`<th>` + myMonth[0][0] + `</th>`;
    htmls+=`<th>` + myMonth[0][1] + `</th>`;
    htmls+=`<th>` + myMonth[0][2] + `</th>`;
    htmls+=`<th>` + myMonth[0][3] + `</th>`;
    htmls+=`<th>` + myMonth[0][4] + `</th>`;
    htmls+=`<th>` + myMonth[0][5] + `</th>`;
    htmls+=`<th>` + myMonth[0][6] + `</th>`;
    htmls+=`</tr>`;
    var d, w;
    for (w = 1; w < 7; w++) {
      htmls+=`<tr>`;
      for (d = 0; d < 7; d++) {
        var ifHasSign = ifHasSigned(signList,myMonth[w][d]);
        if(ifHasSign==2){
          htmls+=`<td class='on'><span>` + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + `</span></td>`;
        }else if (ifHasSign==3){
          htmls+=`<td class='onon'><span>` + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + `</span></td>`;
        }else if (ifHasSign==1) {
          htmls+=`<td><span>` + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + `</span></td>`;
        }
      }
      htmls+=`</tr>`;
    }
    htmls+=`</table>`;
    htmls+=`</div>`;
    htmls+=`</div>`;
    $("#nums").html(htmls);
  };
  drawCal((new Date).getFullYear(),(new Date).getMonth() + 1,(new Date).getFullYear()+"年"+((new Date).getMonth() + 1)+"月");
  $('#nums td').click(function () {
    $(this).addClass('on').siblings().removeClass('on');
    $(this).parent().siblings().children('td').removeClass('on');
  });
  var
      strYear = (new Date).getFullYear(),
      strMonth = (new Date).getMonth()+1;
  $("#prev_date").click(function () {
    var str=getLastMonthYestdy();
    console.log(1);
    if (strYear>(new Date).getFullYear()){
      //isShowDaka=3;
      drawCal(strYear,strMonth,str);
      //$("#daka").css("display","none");
    }else if(strYear==(new Date).getFullYear()){
      if (strMonth>(new Date).getMonth()+1){
        //isShowDaka=3;
        drawCal(strYear,strMonth,str);
        //$("#daka").css("display","none");
      } else if(strMonth==(new Date).getMonth()+1){
        if ($("#daka").hasClass("daka")) {
          console.log(1);
          //isShowDaka=1;
          drawCal(strYear,strMonth,str);
          //$("#daka").css("display","block");
        }else{
          console.log(2);
          //isShowDaka=2;
          drawCal(strYear,strMonth,str);
          //$("#daka").css("display","none");
        }
      }else if (strMonth<(new Date).getMonth()+1) {
        //isShowDaka=2;
        drawCal(strYear,strMonth,str);
        //$("#daka").css("display","none");
      }

    }else if (strYear<(new Date).getFullYear()) {
      //isShowDaka=2;
      drawCal(strYear,strMonth,str);
      //$("#daka").css("display","none");
    }
  });
  function getLastMonthYestdy(){
    var daysInMonth = new Array([0],[31],[28],[31],[30],[31],[30],[31],[31],[30],[31],[30],[31]);

    if(strYear%4 == 0 && strYear%100 != 0){
      daysInMonth[2] = 29;
    }
    if(strMonth - 1 == 0)
    {
      strYear -= 1;
      strMonth = 12;
    }
    else
    {
      strMonth -= 1;
      dCalDate = new Date(strYear, strMonth - 1, 1);
    }

    var datastr1 = strYear+"年"+strMonth+"月";
    return datastr1;
  }
  $("#next_data").click(function () {
    var str2=getNextMonthYestdy();
    if (strYear>(new Date).getFullYear()){
      //isShowDaka=3;
      drawCal(strYear,strMonth,str2);
      //$("#daka").css("display","none");
    }else if(strYear==(new Date).getFullYear()){
      if (strMonth>(new Date).getMonth()+1){
       // isShowDaka=3;
        drawCal(strYear,strMonth,str2);
       // $("#daka").css("display","none");
      }else if (strMonth==(new Date).getMonth()+1){
        if ($("#daka").hasClass("daka")) {
          console.log(3);
         // isShowDaka=1;
          drawCal(strYear,strMonth,str2);
         // $("#daka").css("display","block");
        }else{
          console.log(4);
          //isShowDaka=2;
          drawCal(strYear,strMonth,str2);
         // $("#daka").css("display","none");
        }
      }else if (strMonth<(new Date).getMonth()+1) {
        //isShowDaka=2;
        drawCal(strYear,strMonth,str2);
       // $("#daka").css("display","none");
      }
    }else if (strYear<(new Date).getFullYear()) {
      //isShowDaka=2;
      drawCal(strYear,strMonth,str2);
      //$("#daka").css("display","none");
    }
  });
  function getNextMonthYestdy(){
    var daysInMonth = new Array([0],[31],[28],[31],[30],[31],[30],[31],[31],[30],[31],[30],[31]);

    if(strYear%4 == 0 && strYear%100 != 0){
      daysInMonth[2] = 29;
    }
    if(strMonth == 12)
    {
      strYear += 1;
      strMonth = 1;
    }
    else
    {
      strMonth += 1;
      dCalDate = new Date(strYear, strMonth - 1, 1);
    }

    var datastr2 = strYear+"年"+strMonth+"月";
    return datastr2;
  }


</script>
</html>